import React,{useState} from 'react'
import { useNavigate } from 'react-router-dom'
import './Ctai.css'
export default function Dongtai() {
    const lists =[{id:1,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图4.png')},
    {id:2,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图1.png')},
    {id:3,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图2.png')},
    {id:4,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图3.png')},
    {id:5,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图4.png')},
    {id:6,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图1.png')},
    {id:7,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图2.png')},
    {id:8,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图3.png')},
    {id:9,text:'不要因为别人都交卷了，就乱写你的答案！',name:'星河在哪里', tou:require('../My/img/头像.png'),tu:require('../My/img/内容图4.png')},
    ]
    const navigate = useNavigate()
    const [flag,setflag]=useState(false)
    const [num,setnum]=useState(4)

      window.onscroll = () => {
    setflag(true)
     if(window.innerHeight + window.scrollY >=document.body.scrollHeight-1){
     const timer = setTimeout(()=>{
    setflag(false)
    setnum(num+2)
    clearInterval(timer)
    },1000)
    }}
    
  return (
    <div>
      <div className='ta-nei'
       onClick={()=>{
        navigate('/app/detailye')
      }}
      >
        {(lists.splice(0,num)).map(item=>{
          return <div key={item.id} className='ta-main'>
            <div className='ta-left'>
            <div className='le-tu'><img src={item.tu} ></img></div>
            <dd><p>{item.text}</p></dd>
            <dd style={{float:'left'}}><span style={{borderRadius:'50%'}}><img style={{width:'25px', height:'25px'}} src={item.tou}></img></span><span style={{marginLeft:'5px'}}>{item.name}</span></dd>
            </div>
            <div className='ta-right'>
            <div className='ri-tu'><img src={item.tu}></img></div>
            <dd><p>{item.text}</p></dd>
            <dd style={{float:'left'}}><span style={{borderRadius:'50%'}}><img style={{width:'25px', height:'25px'}} src={item.tou}></img></span><span style={{marginLeft:'5px'}}>{item.name}</span></dd>
            </div>
            
          </div>    
          
        }
        )}
        
      <h3 style={{textAlign:'center'}}>{flag?'加载中...':'已到底'}</h3>
      </div>
    </div>
  )
}
